<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    box-sizing: border-box;
    margin: 0 auto;
  }

  div {
    margin-bottom: 50px
  }

  .progress-1 {
    width: 120px;
    height: 20px;
    background:
      linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    animation: p1 2s infinite linear;
  }

  @keyframes p1 {
    100% {
      background-size: 100%
    }
  }

  .progress-2 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
      linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
    animation: p2 2s infinite steps(10);
  }

  @keyframes p2 {
    100% {
      background-size: 110%
    }
  }

  .progress-3 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
      repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
      repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
    animation: p3 2s infinite;
  }

  @keyframes p3 {
    100% {
      background-size: 100%
    }
  }

  .progress-4 {
    width: 120px;
    height: 20px;
    -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
    background:
      linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    animation: p4 2s infinite steps(6);
  }

  @keyframes p4 {
    100% {
      background-size: 120%
    }
  }

  .progress-5 {
    width: 80px;
    height: 40px;
    border: 2px solid #000;
    padding: 3px;
    background:
      repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px) 0/0% no-repeat content-box content-box;
    position: relative;
    animation: p5 2s infinite steps(6);
  }

  .progress-5::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid #000;
  }

  @keyframes p5 {
    100% {
      background-size: 120%
    }
  }

  .progress-6 {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid;
    position: relative;
  }

  .progress-6::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: #514b82;
    animation: p6 2s infinite;
  }

  @keyframes p6 {
    100% {
      inset: 0
    }
  }

  .progress-7 {
    width: 120px;
    height: 24px;
    -webkit-mask:
      radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
      linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
    background:
      linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
    animation: p7 2s infinite linear;
  }

  @keyframes p7 {
    100% {
      background-size: 100%
    }
  }

  .progress-8 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
    background:
      linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
    animation: p8 2s infinite steps(7);
  }

  @keyframes p8 {
    100% {
      background-size: 100% 115%
    }
  }

  .progress-9 {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
      radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,
      radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,
      radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,
      #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: p9 2s infinite linear;
  }

  @keyframes p9 {
    33% {
      background-position: 0% 33%, 100% 33%, 200% 33%
    }

    66% {
      background-position: -100% 66%, 0% 66%, 100% 66%
    }

    100% {
      background-position: 0% 100%, 100% 100%, 200% 100%
    }
  }

  .progress-10 {
    width: 120px;
    height: 60px;
    border-radius: 200px 200px 0 0;
    -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
    background:
      radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
    animation: p10 2s infinite steps(6);
  }

  @keyframes p10 {
    100% {
      background-size: 120% 120%
    }
  }
</style>

<body>
  <div class="progress-1"></div>
  <div class="progress-2"></div>
  <div class="progress-3"></div>
  <div class="progress-4"></div>
  <div class="progress-5"></div>
  <div class="progress-6"></div>
  <div class="progress-7"></div>
  <div class="progress-8"></div>
  <div class="progress-9"></div>
  <div class="progress-10"></div>
</body>

</html>